<!-- 推广中心 通用列表模板 -->
<template>
  <div id="base-reward-template" class="t-l">
    <c-title :hide="false" :text="diy_name"></c-title>
    <div class="headTop">
      <div class="himg" v-if="info.member && info.member.avatar">
        <img :src="info.member.avatar" alt="" />
      </div>
      <div class="userBox" v-if="info.member">
        <div class="name">{{ info.member && info.member.nickname }}</div>
        <div>
          <div class="grade" v-if="info.member && info.member.level_name">{{ info.member.level_name }}</div>
        </div>
      </div>

      <div class="userBox">
        <div class="name" v-if="info.agent" @click="agentPop = true">代理区域：{{ selectAgentName }} <i class="iconfont icon-a-zhuanranggai" v-if="info.agent.length > 1" ></i></div>
        <div @click="shopPop = true" v-if="info.name">
          <div class="grade" >所属商圈：{{ info.name && info.name[0] }}
            <i class="iconfont icon-member_right" v-if="info.name.length > 1" ></i></div>
        </div>
      </div>

      <div class="grade m-0 bg-fff-o f-15" @click="toUrl('BusDistIndex')">用户端</div>
    </div>

    <van-cell-group inset>
      <van-cell title="累计奖励数量" :value="info.reward_total" />
    </van-cell-group>

    <van-cell-group inset class="m-t-8">
      <van-cell title="推广者" is-link @click="toUrl('BusDistStaffMgmt',{identity: 'promoter'},{agent_id: selectAgent})" v-if="identity == 'agent'"/>
      <van-cell title="门店管理" is-link @click="toUrl('BusDistStaffMgmt',{identity: 'agentStore'},{agent_id: selectAgent})" v-if="identity == 'agent'"/>

      <van-cell title="门店管理" is-link @click="toUrl('BusDistStaffMgmt',{identity: 'promoterStore'})" v-if="identity == 'promoter'"/>
      <van-cell title="门店审核" is-link @click="toUrl('BusDistStoreApply')" v-if="identity == 'promoter'"/>

      <van-cell title="店员管理" is-link @click="toUrl('BusDistStaffMgmt',{identity: 'clerk'})" v-if="identity == 'store'"/>
    </van-cell-group>

    <!--  选项卡 -->
      <div class="navList m-t-8">
        <van-tabs v-model="activeName">
          <van-tab title="会员卡奖励记录">
            <div class="content">
              <div class="content-item" v-for="(item,index) in dataList" :key="index">
                <div class="item">{{ item.order_sn }}</div>
                <div class="item">{{ item.reward||'' }}</div>
                <div class="item flex line-clamp-1" v-if="item.buy_nickname">购买者：<img :src="item.buy_avatar" class="min-img">{{ item.buy_nickname }}</div>
                <div class="item" v-if="item.order_price">订单金额：{{ item.order_price }}</div>
                <div class="item flex line-clamp-1" v-if="item.promoter_nickname">推广者：<img :src="item.promoter_avatar" class="min-img">{{ item.promoter_nickname }}</div>
                <div class="item line-clamp-1" v-if="item.store_name">门店：{{ item.store_name }}</div>
                <div class="item" v-if="item.created_at">时间：{{ item.created_at }}</div>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    <div v-if="finished" style="color: #999;padding-bottom:1rem;" class="t-c">没有更多~</div>

    <van-popup v-model="agentPop" class="pop-base-class" position="bottom" round style="background-color: #F5F5F5;" closeable>
      <div class="pop-base-title">切换区域代理</div>
      <div class="pop-base-content">
        <van-radio-group v-model="selectAgent" @change="getData">
          <van-cell-group inset>
            <van-cell :title="item.name" @click="selectAgent = item.agent_id" clickable  v-for="item in info.agent" :key="item.agent_id">
              <template #right-icon>
                <van-radio :name="item.agent_id" checked-color="var(--themeBaseColor)"/>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div class="pop-base-bottom flex" @click="agentPop = false">
        <van-button round type="danger" block color="var(--themeBaseColor)" style="height: 40px;">确认</van-button>
      </div>
    </van-popup>

    <van-popup v-model="shopPop" class="pop-base-class" position="bottom" round style="background-color: #F5F5F5;" closeable>
      <div class="pop-base-title">所属商圈</div>
      <div class="pop-base-content">
        <van-cell-group inset>
          <van-cell :title="item" v-for="(item,index) in info.name" :key="index"/>
        </van-cell-group>
      </div>
      <div class="pop-base-bottom flex" @click="shopPop = false">
        <van-button round type="danger" block color="var(--themeBaseColor)" style="height: 40px;">关闭</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      identity: "",
      info: {},
      selectAgentName: '',
      activeName: 0,
      dataList: [],
      diy_name: "--",

      finished: false,
      isLoadMore: true,
      current_page: 1,
      last_page: 1,

      shopPop: false,
      agentPop: false,
      selectAgent: ''
    };
  },
  activated() {
    this.initPage();
    this.getData();
  },
  computed: {},
  methods: {
    toUrl(name,params={},query={}){
      if(!name) return;
      this.$router.push(this.fun.getUrl(name,params,query));
    },
    initPage(){
      this.pageOptions = {
        'agent': {
          api: "plugin.business-district.frontend.controllers.agent.index",
          name: "区域代理"
        },
        'promoter': {
          api: "plugin.business-district.frontend.controllers.promoter.index",
          name: "推广者"
        },
        'store': {
          api: "plugin.business-district.frontend.controllers.store.index",
          name: "门店"
        },
        'clerk': {
          api: "plugin.business-district.frontend.controllers.clerk.index",
          name: "店员"
        },
        'platform': {
          api: "plugin.business-district.frontend.controllers.platform.index",
          name: "平台"
        },
        'parent': {
          api: "plugin.business-district.frontend.controllers.parent.index",
          name: ""
        }
      };
      this.identity = this.$route.params.identity;
      this.activeOptions = this.pageOptions[this.$route.params.identity];
    },
    init() {
      this.finished = false;
      this.current_page = 1;
      this.last_page = 1;
      this.dataList = [];
      this.isLoadMore = true;
    },
    async getData() {
      this.init();
      let json = {};
      if(this.selectAgent) json.agent_id = this.selectAgent;
      let { msg, result, data } = await $http.get(this.activeOptions.api, json, ".");
      if (result == 0) {
        return this.$toast(msg);
      }

      this.info = data;
      this.diy_name = this.activeOptions.name;
      this.fun.setWXTitle(this.diy_name);
      this.dataList = data.reward_list.data;

      if(data.store) this.info.member = {
        nickname: data.store.store_name,
        avatar: data.store.thumb,
      };
      if(this.identity == 'clerk') {
        this.info.member.level_name = '店员';
      }
      if(data.agent) {
        // 判断data.agent数组里面 data.agent_id 对应索引
        this.selectAgent = data.agent[data.agent.findIndex(item => item.agent_id == data.agent_id)].agent_id;
        this.selectAgentName = data.agent[data.agent.findIndex(item => item.agent_id == data.agent_id)].name;
      }
      // this.selectAgent = data.agent[0].agent_id;
      this.current_page = data.reward_list.current_page;
      this.last_page = data.reward_list.last_page;
      if (this.current_page == this.last_page) {
        this.finished = true;
      }
    },
    async getMoreData() {
      if (this.current_page >= this.last_page) {
        this.finished = true;
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      let { result, msg, data } = await $http.get(this.activeOptions.api, { page,agent_id: this.selectAgent }, ".");
      this.isLoadMore = true;
      if (result == 0) return this.$toast(msg);
      this.dataList = this.dataList.concat(data.reward_list.data);
      this.current_page = data.reward_list.current_page;
    },
  }
};
</script>
<style lang="scss" scoped>
.m-0 {
  margin: 0;
}

.bg-fff-o {
  background: rgba(255, 255, 255, 0.3);
}

::v-deep .van-tabs__line{
  background: var(--themeBaseColor);
  bottom: 20px;
}

.pop-base-class {
  .pop-base-title {
    margin: 18px 12px 12px;
    font-size: 1rem;
    font-weight: bold;
    text-align: left;
  }
  .pop-base-content {
    min-height: 45vh;
    max-height: 55vh;
    overflow: scroll;
    padding: 0 0 5rem;
  }
  .pop-base-bottom {
    padding: 0.625rem 0.875rem;
    background: #ffffff;
  }
}
.headTop {
  padding: 1.5rem 0.75rem 2rem;
  background: linear-gradient(var(--themeBaseColor), #f5f5f5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .userBox {
    display: flex;
    flex-direction: column;
    margin-left: 0.41rem;
    text-align: left;
    flex: 1;
    .name {
      font-size: 1rem;
      color: #ffffff;
      font-weight: bold;
    }
  }
  .grade {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 0.9rem;
    color: #ffffff;
    margin-top: 0.375rem;
    font-size: 0.75rem;
    background: rgba(0, 0, 0, 0.1);
    text-align: center;
    min-width: 4rem;
  }

  .himg {
    width: 3.44rem;
    height: 3.44rem;
    border-radius: 100%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }
}
.navList {
  margin: 0 0.875rem 1rem;
  border-radius: 0.5rem;
  background: #ffffff;
  overflow: hidden;
  box-sizing: border-box;
}

.min-img {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  margin: 0 0.25rem 0 0;
}

.m-t-8 {
  margin-top: 0.5rem !important;
}
.icon-member_right {
  font-size: 12px;
}

.content {
  .content-item {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin: 8px 12px 0 12px;
    border-bottom: 1px solid #f5f5f5;
    line-height: 20px;
    .item{
      width: 50%;
      font-size: 12px;

    }
    .item:nth-child(2n){
      text-align: right;
    }
  }
}
</style>
